<app-tab>
	<div class="easyui-tabs" ref="tab" data-options="fit:true">
	</div>
	<script>
		var tag = this;
		tag.on('mount', function() {
			$.parser.parse(tag.root);
			$(tag.refs.tab).tabs({
				onLoad:function(panel){
					panel.niceScroll({
						cursorcolor: "#ccc"
					});
				}
			});
			$.subscribe('tab:open', function(e, data) {
				tag.tab.add(data);
			});
			$.subscribe('tab:close', function(e, data) {
				tag.tab.remove(data);
			});
			$.publish('tab:open',{
				title:'首页',
				href:'/index/report',
				closable:false
			});
		});
		tag.tab = {
			add: function(data) {
				var tabData = {
					title: data.title,
					closable: data.closable === undefined ? true : data.closable
				};
				if (this.isExist(data) && !data.isReload) {
					$(tag.refs.tab).tabs('select', data.title);
					return;
				}
				this.remove(data);
				if (data.isIframe) {
					tabData.content = tag.buildIframe(data.href);
				} else {
					tabData.href = data.href;
				}
				$(tag.refs.tab).tabs('add', tabData);
			},
			remove: function(data) {
				if (this.isExist(data)) {
					$(tag.refs.tab).tabs('close', data.title);
				}
			},
			isExist: function(data) {
				return $(tag.refs.tab).tabs('exists', data.title);
			}
		}
		tag.buildIframe = function(url) {
			return '<iframe class="web-frame" src="' + url + '" frameborder="0" seamless="seamless" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation"></iframe>';
		}
	</script>
	<style>
		:scope{
			display: block;
			width: 100%;
			height: 100%;
		}
		:scope .web-frame{
			border:0;
			width:100%;
			height:100%;
			position: absolute;
		}
		:scope .tabs-title{
			color: #777;
		}
	</style>
</app-tab>